<template>
  <div class="button-example">
    <h2 class="example-title">按钮组件示例</h2>
    
    <!-- 主题展示 -->
    <div class="example-section">
      <h3 class="section-title">主题样式</h3>
      <div class="button-row">
        <comp-button theme="default">默认按钮</comp-button>
        <comp-button theme="primary">主要按钮</comp-button>
        <comp-button theme="secondary">次要按钮</comp-button>
        <comp-button theme="danger">危险按钮</comp-button>
        <comp-button theme="success">成功按钮</comp-button>
      </div>
    </div>
    
    <!-- 尺寸展示 -->
    <div class="example-section">
      <h3 class="section-title">按钮尺寸</h3>
      <div class="button-row">
        <comp-button size="small" theme="primary">小型按钮</comp-button>
        <comp-button size="medium" theme="primary">中型按钮</comp-button>
        <comp-button size="large" theme="primary">大型按钮</comp-button>
      </div>
    </div>
    
    <!-- 禁用状态 -->
    <div class="example-section">
      <h3 class="section-title">禁用状态</h3>
      <div class="button-row">
        <comp-button disabled theme="default">禁用默认</comp-button>
        <comp-button disabled theme="primary">禁用主要</comp-button>
        <comp-button disabled theme="danger">禁用危险</comp-button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div class="example-section">
      <h3 class="section-title">加载状态</h3>
      <div class="button-row">
        <comp-button :loading="loading" theme="primary" @click="toggleLoading">{{ loading ? '加载中' : '点击加载' }}</comp-button>
        <comp-button theme="secondary" @click="resetLoading">重置</comp-button>
      </div>
    </div>
    
    <!-- 图标按钮 -->
    <div class="example-section">
      <h3 class="section-title">图标按钮</h3>
      <div class="button-row">
        <comp-button icon="+" theme="primary">添加</comp-button>
        <comp-button icon="✓" theme="success">确认</comp-button>
        <comp-button icon="×" theme="danger">删除</comp-button>
        <comp-button icon="→" iconPosition="right" theme="secondary">下一步</comp-button>
      </div>
    </div>
    
    <!-- 自定义图标 -->
    <div class="example-section">
      <h3 class="section-title">自定义图标</h3>
      <div class="button-row">
        <comp-button theme="primary">
          <template #icon>
            <div class="custom-icon">🚀</div>
          </template>
          自定义图标
        </comp-button>
      </div>
    </div>
    
    <!-- 块级按钮 -->
    <div class="example-section">
      <h3 class="section-title">块级按钮</h3>
      <comp-button block theme="primary">100%宽度按钮</comp-button>
    </div>
    
    <!-- 按钮类型 -->
    <div class="example-section">
      <h3 class="section-title">按钮类型</h3>
      <form @submit.prevent="handleSubmit" class="form-example">
        <div class="form-item">
          <input type="text" placeholder="请输入内容" v-model="formData.text" />
        </div>
        <div class="button-row">
          <comp-button type="submit" theme="primary">提交表单</comp-button>
          <comp-button type="reset" theme="secondary">重置表单</comp-button>
          <comp-button type="button" theme="default">普通按钮</comp-button>
        </div>
      </form>
    </div>
    
    <!-- 焦点状态 -->
    <div class="example-section">
      <h3 class="section-title">焦点状态</h3>
      <div class="button-row">
        <comp-button ref="focusButton" theme="primary">可聚焦按钮</comp-button>
        <comp-button theme="secondary" @click="focusButtonElement">点击聚焦</comp-button>
      </div>
    </div>
    
    <!-- 事件处理 -->
    <div class="example-section">
      <h3 class="section-title">事件处理</h3>
      <div class="button-row">
        <comp-button 
          theme="primary" 
          @click="handleClick" 
          @focus="handleFocus" 
          @blur="handleBlur"
        >
          事件测试
        </comp-button>
      </div>
      <div class="event-log">
        <div>事件日志：</div>
        <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
          {{ log }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CompButton from './Index.vue'

// 加载状态示例
const loading = ref(false)
const toggleLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
const resetLoading = () => {
  loading.value = false
}

// 表单示例
const formData = ref({
  text: ''
})
const handleSubmit = () => {
  alert(`表单提交成功：${formData.value.text}`)
  formData.value.text = ''
}

// 焦点示例
const focusButton = ref<InstanceType<typeof CompButton> | null>(null)
const focusButtonElement = () => {
  if (focusButton.value) {
    focusButton.value.focus()
  }
}

// 事件日志
const eventLogs = ref<string[]>([])
const handleClick = (event: MouseEvent) => {
  eventLogs.value.push(`点击事件触发：${new Date().toLocaleTimeString()}`)
  if (eventLogs.value.length > 5) {
    eventLogs.value.shift()
  }
}
const handleFocus = (event: FocusEvent) => {
  eventLogs.value.push(`获得焦点：${new Date().toLocaleTimeString()}`)
  if (eventLogs.value.length > 5) {
    eventLogs.value.shift()
  }
}
const handleBlur = (event: FocusEvent) => {
  eventLogs.value.push(`失去焦点：${new Date().toLocaleTimeString()}`)
  if (eventLogs.value.length > 5) {
    eventLogs.value.shift()
  }
}
</script>

<style scoped>
.button-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.example-section {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.section-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #555;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.custom-icon {
  font-size: 16px;
}

.form-example {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.event-log {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
}

.log-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ddd;
}
</style>